<template>
	<div>
		<canvas width="200" height="200" id="canvas"  ref="canvas"></canvas>
	</div>
</template>
<script type="text/javascript">
	import { Game, GameObject } from '@eva/eva.js';
	import { RendererSystem } from '@eva/plugin-renderer';
	import {  Text, TextSystem } from '@eva/plugin-renderer-text';
	export default{
		name: 'EvajsStudyShowText',
		data(){
			return {
				percent: 0,
				game: null
			}
		},
		created(){
			this.$nextTick(()=>{
				this.showText()
			})
		},
		destroyed(){
			if(this.game){
				this.game.destroy()
			}
		},
		methods:{
			showText(){
				// 创建游戏
				this.game = new Game({
					systems: [ // 游戏添加渲染系统
						new RendererSystem({
							canvas: this.$refs.canvas,
							width: 400,
							height: 400,
						}),
						// 游戏文本系统
						new TextSystem(),
					],
				});
				// 定义场景的尺寸
				this.game.scene.transform.size = {
					width: 400,
					height: 400
				}
				// 游戏对象
				const text = new GameObject('text', {
					position: { // 位移
						x: 0,
						y: 0
					},
					origin: { // 原点
						x: 0.5,
						y: 0.5
					},
					anchor: { // 锚点
						x: 0.5,
						y: 0.5
					}
				})
				// 游戏对象内添加文本内容
				text.addComponent(
					new Text({
						text: '欢迎使用EVA互动游戏开发体系！',
						style: {
							fontFamily: 'Arial',
							fontSize: 36,
							fontStyle: 'italic',
							fontWeight: 'bold',
							fill: ['#b35d9e', '#84c35f', '#ebe44f'], // gradient
							fillGradientType: 1,
							fillGradientStops: [0.1, 0.4],
							stroke: '#4a1850',
							strokeThickness: 5,
							dropShadow: true,
							dropShadowColor: '#000000',
							dropShadowBlur: 4,
							dropShadowAngle: Math.PI / 6,
							dropShadowDistance: 6,
							wordWrap: true,
							wordWrapWidth: 400,
							breakWords: true
						}
					})
				);
				// 游戏场景内放置游戏对象
				this.game.scene.addChild(text);
			}
		}
	}
</script>